<template>
  <div class="c-home">
    <div class="flex ch">
      <div class="ch-l p">
        <Title :info="gxInfo" />
        <div class="flex c-con">
          <div class="l">
            <p
              class="detail ellipsis-1"
              v-for="item in gxListL"
              :key="item.id"
              @click="handleGoDetail(item)"
            >
              <span class="circle"></span>{{ item.title }}
            </p>
          </div>
          <div class="c flex">
            <p class="c-t"></p>
            <p class="c-c"></p>
            <p class="c-b"></p>
          </div>
          <div class="r">
            <p
              class="detail ellipsis-1"
              v-for="item in gxListR"
              :key="item.id"
              @click="handleGoDetail(item)"
            >
              <span class="circle"></span>{{ item.title }}
            </p>
          </div>
        </div>
      </div>
      <div class="ch-r flex-auto p">
        <p class="z-title">自定义专题集</p>
        <vue-seamless-scroll
          v-if="zdyList.length"
          :data="zdyList"
          :class-option="alertsClassOption"
          class="zt"
        >
          <p
            class="ztp"
            v-for="item in zdyList"
            :key="item.title"
            @contextmenu.prevent="onContextmenu($event, item)"
          >
            <el-button
              class="zdy"
              type="primary"
              size="default"
              round
              @click="handleZDY(item)"
            >
              {{ item.name }}</el-button
            >
          </p>
        </vue-seamless-scroll>
        <div class="z-n flex" v-else>
          <p>暂无自定义专题</p>
        </div>
      </div>
    </div>
    <div class="flex c-wrapper">
      <div class="c-l p">
        <Title :info="nyInfo" />
        <div>
          <p
            class="detail ellipsis-1"
            v-for="item in nyList"
            :key="item.id"
            @click="handleGoDetail(item)"
          >
            <span class="circle"></span>{{ item.title }}
          </p>
        </div>
      </div>
      <div class="c-r p">
        <Title :info="kjInfo" />
        <div>
          <p
            class="detail ellipsis-1"
            v-for="item in kjList"
            :key="item.id"
            @click="handleGoDetail(item)"
          >
            <span class="circle"></span>{{ item.title }}
          </p>
        </div>
      </div>
    </div>
    <RightMenu :rightclickInfo="rightclickInfo" @delete="handleDelete" />
  </div>
</template>
<script>
import Title from "./title.vue";
import RightMenu from "./rightMenu.vue";
export default {
  data() {
    return {
      userInfo: {},
      alertsClassOption: {
        hoverStop: true, // 禁用鼠标悬停停止
        singleHeight: 55, // 单步运动停止的高度
        waitTime: 2000, // 单步停止等待时间
      },
      gxInfo: {
        title: "个性推荐",
        type: "gx",
      },
      nyInfo: {
        title: "能源政策",
        type: "ny",
      },
      kjInfo: {
        title: "科技快讯",
        type: "kj",
      },
      gxList: [],
      gxListL: [],
      gxListR: [],
      nyList: [],
      kjList: [],
      zdyList: [],
      rightclickInfo: {},
    };
  },
  created() {
    const userInfo = JSON.parse(localStorage.getItem("homeUserInfo"));
    this.userInfo = userInfo;
    this.querySpecial();
    this.getList();
  },
  methods: {
    querySpecial() {
      let param = {
        ipi: 1,
        ips: 50,
      };
      this.$post(this.$Url.consultModule.querySpecialColumn, param).then(
        (res) => {
          let data = res.data.result;
          if (data.length) this.zdyList = data;
          // console.log("data", data);
        }
      );
    },
    handleZDY(item) {
      this.$Bus.$emit("gotoMore", {
        title: "领导指示",
      });
      this.$emit("rewriteEvent", item);
    },
    onContextmenu(e, item) {
      console.log("eee", item, e);
      this.rightclickInfo = {
        position: {
          x: e.clientX,
          y: e.clientY,
        },
        menulists: [
          {
            fnName: "delete",
            params: item,
            btnName: "删除该主题",
          },
        ],
      };
    },
    handleDelete(info) {
      let content = `您确定删除自定义专题：${info.name}吗？`;
      this.$confirm(content, "删除提醒", {
        confirmButtonText: "删除",
        closeOnClickModal: false,
      }).then(() => {
        let param = {
          columnEsId: info.esId,
        };
        this.$delete(this.$Url.consultModule.deleteSpecialColumn, param).then(
          (res) => {
            this.$message("删除成功！");
            setTimeout(() => {
              this.querySpecial();
            }, 50);
          }
        );
      });
    },
    getList() {
      const commonParam = {
        ipi: 1,
        ips: 10,
        order: 2,
        fieldObject: { fieldType: "title", text: "" },
        dateObject: { gte: "", lte: this.formatDate(new Date()) },
      };
      const gxparam = {
        ...commonParam,
        userId: this.userInfo.id,
        ips: 16,
        type: "个性推荐",
      };
      const kjparam = {
        ...commonParam,
        type: "科技快讯",
      };
      const nyparam = {
        ...commonParam,
        type: "能源政策",
      };
      this.$post(this.$Url.consultModule.consultList, gxparam).then((res) => {
        let data = res.data && res.data.result;
        if (data) {
          this.gxList = res.data.result;
          this.handleLR(this.gxList);
        }
      });
      this.$post(this.$Url.consultModule.consultList, kjparam).then((res) => {
        let data = res.data && res.data.result;
        if (data) {
          this.kjList = res.data.result;
        }
      });
      this.$post(this.$Url.consultModule.consultList, nyparam).then((res) => {
        let data = res.data && res.data.result;
        if (data) {
          this.nyList = res.data.result;
        }
      });
    },
    handleLR(arr) {
      let l = [],
        r = [],
        s = false;
      arr.forEach((item) => {
        if (s) {
          r.push(item);
        } else {
          l.push(item);
        }
        s = !s;
      });
      this.gxListL = l;
      this.gxListR = r;
    },
    handleGoDetail(item) {
      let url = this.$router.resolve({
        name: "ConsultDetail",
        query: {
          id: item.id,
        },
      });
      window.open(url.href, "_blank");
    },
  },
  components: {
    Title,
    RightMenu,
  },
};
</script>
<style lang="scss" scoped>
.c-home {
  padding-bottom: 20px;
  .flex {
    display: flex;
  }
  .flex-auto {
    flex: 1;
  }
  .p {
    border: 1px solid #cecece;
    background-color: #fff;
    padding: 0 15px 15px 0;
    margin-top: 20px;
  }
  .ch {
    justify-content: space-between;
  }
  .ch-l {
    width: 80%;
    .c-con {
      width: 100%;
    }
    .l,
    .r {
      width: 48%;
    }
    .c {
      flex: 1;
      align-items: center;
      flex-flow: column nowrap;
      .c-t {
        width: 8px;
        height: 8px;
        border: 1px solid $mainColor;
        transform: rotate(45deg);
      }
      .c-c {
        flex: 1 1 auto;
        border-left: 1px dashed $mainColor;
      }
      .c-b {
        width: 8px;
        height: 8px;
        background-color: $mainColor;
        transform: rotate(45deg);
      }
    }
  }
  .ch-r {
    margin-left: 20px;
    padding: 15px;
    .z-title {
      font-size: 16px;
    }

    .z-n {
      height: 100%;
      justify-content: center;
      align-items: center;
      color: $color6;
    }
    .zt {
      max-height: 335px;
      overflow: hidden;
      align-items: center;
      flex-flow: column nowrap;
    }
    .ztp {
      text-align: center;
    }
    .zdy {
      width: 170px;
      margin-top: 15px;
      background-color: $mainColor;
    }
  }
  .detail {
    width: 100%;
    margin: 20px 0;
    cursor: pointer;
    .circle {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: $mainColor;
      margin-right: 10px;
      margin-left: 18px;
    }
  }
  .c-wrapper {
    justify-content: space-between;
  }
  .c-l,
  .c-r {
    width: 49%;
  }
}
</style>
